<template>
	<div class = "container" @click = "close">
		<div class="wrap">
			<swiper :options="swiperOption">
			    <swiper-slide v-for = "(item,index) of gallaryImgs" :key = "index">
		    		<div class = "imgWrap">
		    			<img :src="item" alt="">
		    		</div>
			    </swiper-slide>
			    <div class="swiper-pagination"  slot="pagination"></div>
		    </swiper>
		</div>
	</div>
</template>

<script>
	export default {
		name : 'gallery',
		props:["gallaryImgs"],
		data () {
			return {
				swiperOption : {
					pagination : ".swiper-pagination",
					paginationType : 'fraction',
					observeParents: true,
        			observer: true
				}
			}
		},
		methods : {
			close () {
				this.$emit('close');
			}
		}
	}
</script>

<style lang = "less" scoped>
	.container /deep/ .swiper-container {
		overflow:inherit;
	}
	.container {
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:1;
		background: #000;
		.wrap {
			width:100%;
			height:0;
			padding-bottom:100%;
			position: absolute;
			top:50%;
			left:0;
			transform:translateY(-50%);
			.imgWrap {
				position: relative;
				overflow: hidden;
				height:0;
				padding-bottom:100%;
			}
			img {
				position: absolute;
				top:50%;
				left:0;
				transform: translateY(-50%);
				width:100%;
			}
			.swiper-pagination {
				color:#fff;
				bottom:-1rem;
			}
		}
	}
</style>